<!DOCTYPE html>
<html lang="zh">
<html xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8"/>
    <title>发送邮件</title>
    <link th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/webjars/bootstrap-fileinput/4.2.0/css/fileinput.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/webjars/jquery/3.3.1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
    <script th:src="@{/webjars/bootstrap-fileinput/4.2.0/js/fileinput.js}"></script>
    <script th:src="@{/webjars/bootstrap-fileinput/4.2.0/js/fileinput_locale_zh.js}"></script>

    <script th:inline="javascript">
        $(function () {
            var control = $('#files');
            control.fileinput({
                language: 'zh', //设置语言
                uploadUrl: "upload/insert", //上传的地址
                allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
                //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
                uploadAsync: false, //默认异步上传
                showUpload: false, //是否显示上传按钮
                showRemove: true, //显示移除按钮
                showPreview: true, //是否显示预览
                showCaption: false,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                //dropZoneEnabled: true,//是否显示拖拽区域
                //minImageWidth: 50, //图片的最小宽度
                //minImageHeight: 50,//图片的最小高度
                //maxImageWidth: 1000,//图片的最大宽度
                //maxImageHeight: 1000,//图片的最大高度
                //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
                //minFileCount: 0,
                //maxFileCount: 10, //表示允许同时上传的最大文件个数
                overwriteInitial: false, //不覆盖已存在的图片
                //下面几个就是初始化预览图片的配置
                initialPreviewAsData: true,
                initialPreviewFileType: 'image',
                initialPreview: [],
                initialPreviewConfig: [],
                enctype: 'multipart/form-data',
                validateInitialCount: true,
                layoutTemplates: {
                    actionUpload: '',//去除上传预览缩略图中的上传图片
                },
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            }).on('filepreupload', function (event, data, previewId, index) {     //上传中
                var form = data.form, files = data.files, extra = data.extra,
                    response = data.response, reader = data.reader;
                console.log('文件正在上传');
            }).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功
                console.log('文件上传成功！' + data.id);
            }).on('fileerror', function (event, data, msg) {  //一个文件上传失败
                console.log('文件上传失败！' + data.id);
            })
        })

        var appCtx = [[${#request.getContextPath()}]];

        function sendMail() {

            var formData = new FormData($('#mailForm')[0]);
            $.ajax({
                url: appCtx + '/mail/send',
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (result) {
                    alert(result.status === 'ok' ? "发送成功！" : "你被Doge嘲讽了：" + result.error);
                },
                error: function () {
                    alert("发送失败！");
                }
            });
        }

        function clearForm() {
            $('#mailForm')[0].reset();
        }

        setInterval(function () {
            var total = $('#mq').width();
            var width = $('#doge').width();
            var left = $('#doge').offset().left;
            if (left <= width / 2) {
                $('.doge').css('transform', 'rotateY(180deg)')
            }
            if (left >= total - width / 2  -  260) {
                $('.doge').css('transform', 'rotateY(-360deg)')
            }
        });

    </script>
</head>
<body>
<div class="col-md-10" style="margin:20px;padding:20px;border: #E0E0E0 1px solid;">
    <marquee behavior="alternate" onfinish="alert(12)" id="mq" scrolldelay="40"
             onMouseOut="this.start();$('#egg').text('祝程序不写BUG！！！');"
             onMouseOver="this.stop();$('#egg').text('有本事放开我呀！');">
        <h5 id="egg">祝程序永无BUG！！！</h5>
        <img id="doge" class="doge" src="http://pics.sc.chinaz.com/Files/pic/faces/3709/7.gif" alt="">
        <img class="doge" src="http://pics.sc.chinaz.com/Files/pic/faces/3709/7.gif" alt="">
        <img class="doge" src="http://pics.sc.chinaz.com/Files/pic/faces/3709/7.gif" alt="">
        <img class="doge" src="http://pics.sc.chinaz.com/Files/pic/faces/3709/7.gif" alt="">
    </marquee>

    <form class="form-horizontal" id="mailForm">
        <div class="form-group">
            <label class="col-md-2 control-label">邮件发信人:</label>
            <div class="col-md-6">
                <input class="form-control" id="from" name="from" th:value="${from}" readonly="readonly">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">邮件收信人:</label>
            <div class="col-md-6">
                <input class="form-control" id="to" name="to" title="多个邮箱使用,隔开">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">邮件主题:</label>
            <div class="col-md-6">
                <input class="form-control" id="subject" name="subject">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">邮件内容:</label>
            <div class="col-md-6">
                <textarea class="form-control" id="text" name="text" rows="5"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">邮件附件:</label>
            <div class="col-md-6">
                <input id="files" class="input-id" name="files" type="file" multiple/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">邮件操作:</label>
            <div class="col-md-3">
                <a class="form-control btn btn-primary" onclick="sendMail()">发送邮件</a>
            </div>
            <div class="col-md-3">
                <a class="form-control btn btn-default" onclick="clearForm()">清空</a>
            </div>
        </div>
    </form>
</body>
</html>